<template>
    <view>
        <!-- 地图 -->
        <map
            class="Map"
            :latitude="nowCoordinate.starLatitude"
            :longitude="nowCoordinate.starLongitude"
            :markers="covers"
            :polyline="polyline"
            :show-location="true"
            @regionchange="mapChangeOver"
            :enable-3D="true"
            :enable-overlooking="true"
            :enable-traffic="true"
            layer-style="bule"
            id="IDMap"
            scale="18"
            @updated="mapUpdateOver"
        >
            <cover-view class="pos_a FUN" v-if="FunShow">
                <cover-view class="flex_al_cen_ju_bet">
                    <cover-view class="bg Back">
                        <cover-view>
                            <cover-image
                                @click="Back"
                                src="../static/images/pulice/back.png"
                            ></cover-image
                            >
                        </cover-view>
                    </cover-view>
                    <cover-view class="flex_al_cen_ju_bet">
                        <mark-cover></mark-cover>
                        <cover-view class="bg kefu">
                            <cover-image
                                @click="makePhone"
                                src="../static/images/pulice/kefu.png"
                            ></cover-image>
                            <cover-view>客服</cover-view>
                        </cover-view>
                    </cover-view>
                </cover-view>
            </cover-view>
        </map>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>
<script setup lang="ts">
import {getCurrentInstance, defineProps, reactive} from "vue";
import {Back} from "../utlis/uni_api";
import {onLoad, onHide, onShow, onUnload} from "@dcloudio/uni-app";
import Map from "@/Hooks/Map/Map";
import {getLocation} from "@/utlis/uni_api";

const {proxy} = getCurrentInstance() as any;
const Props = defineProps<{
    FunShow: boolean;
    polylines: any;
    markCover: any;
    statusType: any;
    longitudeMap: any;
    latitudeMap: any;
}>();
const {
    nowCoordinate,
    makePhone,
    MarkLoaction,
    mapUpdateOver,
    timer,
    covers,
    phoneNumber,
    polyline,
    showData,
    mapChangeOver,
    baseData,
} = Map(Props, proxy);
onShow(() => {

});
onLoad((options: any) => {
    baseData.id = options.id;
    baseData.Type = options.Type; //待取货1 | 配送中2
    baseData.orderType = options.orderType; //外卖0 | 跑腿1
    // 取送地址
    covers[0].latitude = Props.markCover.startingLatitude;
    covers[0].longitude = Props.markCover.startingLongitude;
    covers[1].latitude = Props.markCover.terminalLatitude;
    covers[1].longitude = Props.markCover.terminalLongitude;

    //渲染骑手位置
    MarkLoaction.latitude = Props.latitudeMap;
    MarkLoaction.longitude = Props.longitudeMap;
    nowCoordinate.starLatitude = Props.latitudeMap;
    nowCoordinate.starLongitude = Props.longitudeMap;
    // 骑手当前位置
    let obj = {
        latitude: Props.latitudeMap,
        longitude: Props.longitudeMap,
        width: 70,
        height: 70,
        title: "",
        iconPath: "/static/images/pulice/ridermotuo.png",
    };
    covers[2] = obj;
    // 更新骑手位置
    if (!showData.drawLineShow) {
        showData.drawLineShow = true;
        // 更新骑手频率
        mapUpdateOver();
    }

    // // 每次切换后台进来  都要重新获取一下定位信息 重新渲染骑手的位置
    // getLocation().then((response: any) => {
    //     console.log(response, "response");
    //     if (response.latitude || response.longitude) {
    //         let locations = response.longitude + "," + response.latitude;
    //         // 转换坐标
    //         proxy
    //             .$API(proxy)
    //             .CoordinateTransformation(locations)
    //             .then((res: { longitude: string; latitude: string }) => {
    //                 console.log(res, "-------坐标转换-----");
    //                 MarkLoaction.latitude = res.latitude;
    //                 MarkLoaction.longitude = res.longitude;
    //                 nowCoordinate.starLatitude = res.latitude;
    //                 nowCoordinate.starLongitude = res.longitude;
    //                 // 骑手当前位置
    //                 let obj = {
    //                     latitude: res.latitude,
    //                     longitude: res.longitude,
    //                     width: 70,
    //                     height: 70,
    //                     title: "",
    //                     iconPath: "/static/images/pulice/ridermotuo.png",
    //                 };
    //                 covers[2] = obj;
    //             });
    //         // 更新骑手位置
    //         if (!showData.drawLineShow) {
    //             showData.drawLineShow = true;
    //             // 更新骑手频率
    //             mapUpdateOver();
    //         }
    //     }
    // });

    // 客服电话
    phoneNumber(proxy);
});

// 切换后台
onHide(() => {
    console.log("切入后台");
    // 暂停骑手频率与详情接口
    showData.drawLineShow = false;
    clearTimeout(timer.value);

    // 更新骑手位置
    if (!showData.drawLineShow) {
        showData.drawLineShow = true;
        // 更新骑手频率
        mapUpdateOver();
    }
});
// 离开页面
onUnload(() => {
    // 暂停骑手频率与详情接口
    showData.drawLineShow = false;
    clearTimeout(timer.value);

    // 更新骑手位置
    if (!showData.drawLineShow) {
        showData.drawLineShow = true;
        // 更新骑手频率
        mapUpdateOver();
    }
});
</script>

<style scoped lang="scss">
.bg {
    background: #fff;
    padding: 7rpx;
    margin-right: 10rpx;
    font-size: 20rpx;
}

.kefu {
    padding: 15rpx 20rpx;
    margin-right: 30rpx;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(170, 170, 170, 0.2);
    border-radius: 10rpx 10rpx 10rpx 10rpx;

    cover-image {
        margin: 0 auto 7rpx;
        width: 35rpx;
        height: 35rpx;
        z-index: 9999;
    }
}

.Map {
    width: 100%;
    height: 500rpx;
}

.Back {
    width: 60rpx;
    height: 77rpx;
    margin-left: 20rpx;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(170, 170, 170, 0.2);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    background: #fff;
    text-align: center;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;

    cover-image {
        display: block;
        width: 23rpx;
        height: 41rpx;
        z-index: 9999;
    }
}

.FUN {
    top: 12%;
    width: 100%;
    z-index: 99999;
    text-align: center;

    > view {
        padding: 20rpx;
    }
}
</style>
